<link rel="stylesheet" href="css/index.css"/>
<script src="js/jquery-3.4.1.js"></script>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="js/menu.js"></script>

<div id="app">
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">位置</el-breadcrumb-item>
        <el-breadcrumb-item>产品管理</el-breadcrumb-item>
        <el-breadcrumb-item>产品分类列表</el-breadcrumb-item>
    </el-breadcrumb>
    <br/>

    <el-button type="primary" size="mini" @click="dialogFormVisible=true">新增</el-button>
    <el-table :data="tableData" height="450px" border style="width: 100%">
        <el-table-column prop="categoryID" label="分类序列号" width="180"></el-table-column>
        <el-table-column prop="name" label="产品类别名称" width="180"></el-table-column>
        <el-table-column prop="remark" label="描述" width="180"></el-table-column>
        <el-table-column label="操作" width="140">
            <template slot-scope="scope">
                <el-button type="text" size="medium" @click="del(scope.row)">删除</el-button>
                <el-button type="text" size="medium" @click="handleClick(scope.row)">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            background
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            layout="sizes, prev, pager, next, jumper, ->, total, slot"
            :page-sizes="[5, 1, 2, 3, 4]"
            :page-size="pageSize"
            :currentPage="currentPage"
            :total="totalRecord"  >
    </el-pagination>

    <el-dialog title="产品分类列表" :visible.sync="dialogFormVisible" width="500px" top="80px">
        <el-form label-width="80px">
            <el-form-item label="类别名称:" >
                <el-input v-model="name"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="描述:">
                <el-input type="textarea" rows="6" v-model="remark"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="margin-top: -50px">
            <el-button @click="cancel" size="small">取 消</el-button>
            <el-button type="primary" @click="addSure" size="small">确 定</el-button>
        </div>
    </el-dialog>
</div>

<script>
    window.onload = function () {
        let vm = new Vue({
            el: "#app",
            data:{
                labelPosition:"left",
                dialogFormVisible:false,
                tableData:[],
                categoryID: "",
                name: "",
                remark: "",
                currentPage:1,
                totalRecord:0,
                pageSize:5,
            },
            methods:{
                init:function (){
                    let that = this;
                    axios({
                        method:"get",
                        url:"getCatAllByPage?currentPage="+that.currentPage+"&pageSize="+that.pageSize
                    }).then(function (resp){
                        console.log(resp.data.lists)
                        that.tableData = resp.data.lists;

                        //设置总条数
                        that.totalRecord = resp.data.totalRecord;
                    });
                },
                handleCurrentChange:function (val){
                    this.currentPage = val;
                    this.init();
                },
                handleSizeChange:function (val){
                    this.pageSize = val;
                    this.init();
                },
                handleClick:function (row){
                    this.categoryID = row.categoryID;
                    this.name = row.name;
                    this.remark = row.remark;
                    this.dialogFormVisible = true;
                },
                cancel:function () {
                    this.dialogFormVisible = false;
                    this.clear();
                    this.$message({
                        showClose: true,
                        message: '你已成功取消',
                        duration: "1000"
                    });
                },
                del:function (row){
                    if(window.confirm("确认删除?")){
                        let that = this;
                        this.categoryID = row.categoryID;
                        axios.get("delCategory?categoryID="+that.categoryID).then(function (resp){
                            that.clear();
                            that.init();
                            console.log(resp.data)
                            if(resp.data>0){
                                that.$message({
                                    showClose: true,
                                    message: '恭喜你，删除成功',
                                    type: 'success',
                                    duration:"1000"
                                });
                            }else {
                                that.$message({
                                    showClose: true,
                                    message: '删除失败',
                                    type: 'success',
                                    duration:"1000"
                                });
                            }
                        });
                    }
                },
                clear:function (){
                    this.categoryID=this.name=this.remark="";
                },
                addSure:function (){
                    let that = this;
                    let category = {categoryID:this.categoryID,name:this.name,remark:this.remark};
                    console.log(category);
                    axios.post("addCategory",category).then(function (resp){
                        that.clear();
                        that.init();
                        console.log(resp.data)
                        if(resp.data>0){
                            that.$message({
                                showClose: true,
                                message: '恭喜你，成功了',
                                type: 'success',
                                duration:"1000"
                            });
                        }else {
                            that.$message({
                                showClose: true,
                                message: '失败了',
                                type: 'success',
                                duration:"1000"
                            });
                        }
                    });
                    this.dialogFormVisible = false
                }
            }
        });

        vm.init();
    }
</script>